<template>
  <div class="transaction-detail">
    <el-card>
      <template #header>
        <div class="header">
          <h3>交易详情</h3>
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>
      </template>

      <div v-loading="loading">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="交易ID">{{ transaction.id }}</el-descriptions-item>
          <el-descriptions-item label="交易类型">
            <el-tag :type="getTransactionTypeTag(transaction.type)">
              {{ getTransactionTypeText(transaction.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="交易金额">
            ¥ {{ transaction.amount.toFixed(2) }}
          </el-descriptions-item>
          <el-descriptions-item label="交易时间">
            {{ transaction.createdAt }}
          </el-descriptions-item>
        </el-descriptions>

        <div v-if="transaction.type === 'TRANSFER'" class="transfer-details">
          <h4>转账详情</h4>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="转出账户">
              {{ transaction.fromAccountNumber }} ({{ transaction.fromCustomerName }})
            </el-descriptions-item>
            <el-descriptions-item label="转入账户">
              {{ transaction.toAccountNumber }} ({{ transaction.toCustomerName }})
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div v-else-if="transaction.type === 'DEPOSIT'" class="deposit-details">
          <h4>存款详情</h4>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="目标账户">
              {{ transaction.toAccountNumber }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div v-else-if="transaction.type === 'WITHDRAW'" class="withdraw-details">
          <h4>取款详情</h4>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="源账户">
              {{ transaction.fromAccountNumber }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { transactionApi } from '../../api'

const route = useRoute()
const router = useRouter()
const transaction = ref({
  id: '',
  type: '',
  amount: 0,
  createdAt: '',
  fromAccountId: null,
  fromAccountNumber: '',
  fromCustomerName: '',
  toAccountId: null,
  toAccountNumber: '',
  toCustomerName: ''
})
const loading = ref(false)

onMounted(() => {
  fetchTransaction()
})

const fetchTransaction = async () => {
  loading.value = true
  try {
    const response = await transactionApi.getTransaction(route.params.id)
    transaction.value = response.data
  } catch (error) {
    console.error(error)
    ElMessage.error('获取交易详情失败')
  } finally {
    loading.value = false
  }
}

const getTransactionTypeText = (type) => {
  const types = {
    DEPOSIT: '存款',
    WITHDRAW: '取款',
    TRANSFER: '转账'
  }
  return types[type] || type
}

const getTransactionTypeTag = (type) => {
  const tags = {
    DEPOSIT: 'success',
    WITHDRAW: 'danger',
    TRANSFER: 'warning'
  }
  return tags[type] || ''
}

const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.transfer-details,
.deposit-details,
.withdraw-details {
  margin-top: 30px;
}
</style>